<template>
    <div class="liveView">
        <video-player
                class="vjs-custom-skin"
                ref="videoPlayer"
                :options="playerOptions"
                @ready="onPlayerReadied"
                @timeupdate="onTimeupdate"
        >
        </video-player>
    </div>
</template>

<script>
    import {videoPlayer} from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    // import 'videojs-contrib-hls/dist/videojs-contrib-hls'
    import 'videojs-contrib-hls'

    export default {
        name: 'liveVideo',
        components: {
            videoPlayer
        },
        data() {
            return {
                initialized: false,
                currentTech: '',
                streams: {
                    rtmp: '',
                    hls: ''
                },
                playerOptions: {
                    overNative: true,
                    autoplay: false,
                    controls: true,
                    techOrder: ['html5'],
                    sourceOrder: true,
                    aspectRatio: '16:9',
                    flash: {
                        hls: {withCredentials: false}
                    },
                    html5: {hls: {withCredentials: false}},
                    // poster: "poster.jpg",
                    sources: [
                        {
                            withCredentials: false,
                            type: 'application/x-mpegURL',
                            src: 'https://us-2.wl-cdn.com/hls/20200308/a9e9c7b577d4bb05d2a66508e63f5a17/index.m3u8'
                        }
                    ]
                    // controlBar: {
                    //   timeDivider: false, // 时间分割线
                    //   durationDisplay: false, // 总时间
                    //   progressControl: true, // 进度条
                    //   customControlSpacer: true, // 未知
                    //   fullscreenToggle: true // 全屏
                    // },
                }
            }
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player;
            },
            currentStream() {
                return this.currentTech === 'Flash' ? 'RTMP' : 'HLS';
            }
        },
        methods: {
            onPlayerReadied() {
                if (!this.initialized) {
                    this.initialized = true;
                    this.currentTech = this.player.techName_;
                }
            },
            // record current time
            onTimeupdate(e) {
                console.log('currentTime', e.cache_.currentTime);
            },
            enterStream() {
                this.playerOptions.sources[0].src = this.streams.hls;
                this.playerOptions.autoplay = true
            },
            changeTech() {
                if (this.currentTech === 'Html5') {
                    this.playerOptions.techOrder = ['html5']
                } else if (this.currentTech === 'Flash') {
                    this.playerOptions.techOrder = ['flash']
                }
                this.playerOptions.autoplay = true
            }
        }
    }
</script>

<style scoped>
    .liveView {
        position: relative;
        /*width:80%;*/
        height: auto;
        width: 800px;
        /*height: 600px;*/
    }
    .chat {
        width: 400px;
        margin: 0 auto;
    }
    #chat {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    h1, h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
    }
</style>
